<!--
 * @Descripttion: 参数管理
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-28 15:40:28
-->
<template>
  <div class="lb-goods-list">
    <top-nav />
    <div class="page-main">
      <el-row class="page-top-operate">
        <el-button plain size="medium" @click="$router.push('/malls/parimary')"
          >设置属性参数</el-button
        >
        <el-button
          type="primary"
          @click="addTempl()"
          size="medium"
          icon="el-icon-plus"
          >添加模板</el-button
        >
      </el-row>
      <el-table
        v-loading="loading"
        ref="multipleTable"
        :data="tableData"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="name" label="模板名称"></el-table-column>
        <el-table-column prop="status" show-overflow-tooltip label="是否启用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              @change="upperAndDelGoods(scope.row.status, scope.row.id)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" sortable label="创建时间">
          <template slot-scope="scope">
            <p>{{ scope.row.create_time | handleTime(1) }}</p>
            <p>{{ scope.row.create_time | handleTime(2) }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="table-operate">
              <lb-button
                size="mini"
                plain
                type="primary"
                @click="editParimary(scope.row)"
                >{{ $t('action.edit') }}</lb-button
              >
              <lb-button
                size="mini"
                plain
                type="danger"
                @click="delParimary(scope.row.id)"
                >{{ $t('action.delete') }}</lb-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <lb-page
        :page="searchForm.page"
        :pageSize="searchForm.limit"
        :total="total"
        :batch="false"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></lb-page>
    </div>
    <!-- 添加模板 -->
    <lb-templte
      ref="temPlate"
      @changeTemplate="changeTemplate"
      :showTemplate="showTemplate"
    ></lb-templte>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showTemplateId: '',
      addForm: {
        name: '',
        pid: 0,
        status: 1
      },
      showAddGood: false,
      showTemplate: false,
      loading: false,
      searchForm: {
        page: 1,
        limit: 10
      },
      editParimaryItem: '',
      tableData: [],
      total: 0,
      multipleSelection: []
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    addTempl () {
      this.$refs['temPlate'].addParimarData()
      this.showTemplate = !this.showTemplate
    },
    //   组件完成刷新数据
    changeTemplate () {
      this.getDataList()
    },
    // 编辑参数
    editParimary (item) {
      this.editParimaryItem = item
      this.showTemplate = !this.showTemplate
      // this.$refs['temPlate'].addParimarData()
      this.$refs['temPlate'].editParimarData(item.id)
    },
    // 删除参数
    delParimary (id) {
      this.config(() => {
        this.$api.updateGoodsParameterTemplateStatus({
          id: id,
          status: -1
        }).then(res => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.searchForm.page = this.searchForm.page < Math.ceil((this.total - 1) / this.searchForm.limit) ? this.searchForm.page : Math.ceil((this.total - 1) / this.searchForm.limit)
            this.getDataList()
          }
        })
      })
    },

    // 确认函数
    config (func) {
      this.$confirm('你确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (typeof func === 'function') {
          func()
        }
      })
    },
    upperAndDelGoods (status, id) {
      let statusIndex = 0
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].id === id) {
          statusIndex = i
          status === 0 ? this.tableData[i].status = 1 : this.tableData[i].status = 0
        }
      }
      this.$api.updateGoodsParameterTemplateStatus({
        id: id,
        status: status
      }).then(res => {
        if (res.code === 200) {
          this.tableData[statusIndex].status = status
          this.$message.success('修改成功')
        }
        console.log(res)
      })
    },
    // 修改参数
    addParimary () {
      // if (this.editParimaryItem) {
      //   this.addForm.id = this.editParimaryItem.id
      //   this.$api.updateGoodsParameterEdit(this.addForm).then(res => {
      //     this.$message.success('修改成功')
      //     this.showAddGood = false
      //     this.editParimaryItem = ''
      //     this.getDataList()
      //   })
      // } else {
      this.$api.addGoodsParameterAdd(this.addForm).then(res => {
        console.log(res)
        this.$message.success('添加成功')
        this.showAddGood = false
        this.getDataList()
      })
    },
    // 获取参数列表
    getDataList () {
      this.$api.getGoodsParameterTemplateList(this.searchForm).then(res => {
        if (res.code === 200) {
          console.log(res)
          this.tableData = res.data.data
          this.total = res.data.total
        }
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getDataList()
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-goods-list {
  width: 100%;
  .page-main {
    width: 100%;
    padding: 20px;

    .el-table {
      img {
        width: 80px;
        height: 80px;
      }
    }
  }
}
.btn_view {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
